<template>
  <a-comment class="a_comment">
    <template v-slot:author>
      <a v-if="comment.parent_msg_username" class="reply-to comment_basic_a"
        >@{{ comment.parent_msg_username }}</a
      >
    </template>
    <template v-slot:avatar>
      <a-avatar src="https://joeschmoe.io/api/v1/random" alt />
    </template>
    <template v-slot:content>
      <p>{{ comment.content }}</p>
    </template>
    <template v-slot:datetime>
      <a
        slot="author"
        class="comment_basic_a"
        style="font-size: 15px; display: block"
        >{{ comment.username }}</a
      >
      <a-tooltip placement="top">
        <template #title>
          <span>{{ comment.date }}</span>
        </template>
        <span>{{ comment.date }}</span>
      </a-tooltip>
      <span
        key="comment-basic-reply-to"
        class="comment_basic"
        @click="handlReply(comment.id, comment.username)"
      >
        <a class="comment_basic_a" href="#my-textarea">
          <img width="14px" src="../../assets/icon/ic-msg.png" alt="" />
          回复</a
        >
      </span>
    </template>
    <slot name="childComment"></slot>
  </a-comment>
</template>

<script>
export default {
  name: 'Comment',
  props: {
    comment: '',
  },
  methods: {
    handlReply(msgId, msgUsername) {
      this.$emit('handleReply', { msgId, msgUsername })
    },
  },
}
</script>

<style scoped>
.reply-to {
  padding-left: 5px;
  color: #409eff;
  font-weight: 500;
  font-size: 15px;
}
:deep(.ant-comment-content-author) {
  display: inline-flex;
}
.a_comment {
  position: relative;
}
.comment_basic {
  position: absolute;
  top: 12px;
  right: 0;
}
.comment_basic_a {
  text-decoration: none;
  color: #969696;
}
</style>
